@extends('common.base-master')

@section('html-head')
    <link rel="stylesheet" href="{{url('css/style.css')}}">
    <link rel="stylesheet" href="{{url('css/common.css')}}">
    <link rel="stylesheet" href="{{url('css/public.css')}}">
    <script src="{{url('js/jquery.countdown.min.js')}}"></script>
    <style>
        body{
            background-color: #f3f3f3;
        }


        /*展开全文*/
        .unfold-field{
            position:absolute;
            font-size: 0;
            bottom:0;
            width:100%;
            height:124px;
            z-index: 3;
        }
        .unfold-field .unflod-field_mask {
            height: 78px;
            width: 100%;
            background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,hsla(0,0%,100%,0)),to(#fff));
            background-image: linear-gradient(-180deg,hsla(0,0%,100%,0),#fff);
        }
        .unfold-field_text{
            cursor: pointer;
            width:100%;
            color: #406599;;
            height:46px;
            font-size: 0px;
            line-height: 46px;
            text-align: center;
            background:#fff;
        }
        .unfold-field_text span{
            display:inline-block;
            font-size: 16px;
            height:46px;
            line-height: 46px;
        }
        .unfold-field_text span::after{
            content:"";
            vertical-align: middle;
            background:url({{url('images/bottom.png')}});
            background-size: contain;
            background-repeat: no-repeat;
            width: 9px;
            height: 6px;
            display: inline-block;
            margin-left: 5px;
        }

    </style>
@endsection

@section('html-body')
    <div>
        <!-- header -->
        <div class="header">
            <div class="header-count bg-color__theme">
                <img src="{{url('images/time.png')}}" alt="" class="img-size-small icon_list">
                剩余时间：<span id="out_time"></span>
            </div>
            <div class="header-btn_box">
                @if($plan)
                    @if($plan->is_join ==1)
                    <a href="{{route('Home.Page.page',['tag'=>'has_join'])}}" class="weui-btn bg-color__theme font-color_white header-btn bg-color__theme--active">
                        你已成为会员，一起改变世界
                    </a>
                    @else
                    <a href="{{route('Home.Page.joinMember')}}" class="weui-btn bg-color__theme font-color_white header-btn bg-color__theme--active">
                        <img src="{{url('images/vip2.png')}}" alt="" class="header-btn_icon icon_list"> 加入计划
                        : ￥ @if($plan) {{$plan->amount}} @else 0 @endif
                    </a>
                    @endif
                    @else
                    <a href="javascript:void(0);" class="weui-btn bg-color__theme font-color_white header-btn bg-color__theme--active">
                        <img src="{{url('images/vip2.png')}}" alt="" class="header-btn_icon icon_list">暂无启动计划
                    </a>
                @endif
            </div>
            <div class="header-msg_box">
                <div class="weui-flex">
                    <div class="weui-flex__item border-r_1__wechat">
                        <p class="header-msg_title">总资金数额（元）</p>
                        <p class="header-msg_value">{{$all_amount}}</p>
                    </div>
                    <div class="weui-flex__item">
                        <p class="header-msg_title">会员数额（人）</p>
                        <p class="header-msg_value">{{$all_num}}</p>
                    </div>
                </div>
            </div>
        </div>
        <!-- 文案 -->
        <div class="article_box">
            {{--class="weui-article"--}}
            <article class="weui-article" style="padding: 0;@if($plan && $plan->is_join != 1) max-height:450px; overflow: hidden;position:relative;@endif">
                <!-- TODO：后台修改直接替换以下内容 -->
                <section style="margin-bottom:0;">
                    {{--<h1 class="article_title margin-t_0">@if($plan){{$plan->title}}@endif</h1>--}}
                    <section class="font-size-xregular">
                        <?php if($plan){echo html_entity_decode($plan->content);} ?>
                    </section>
                </section>
                <!-- /TODO：替换结束 -->
                @if($plan && $plan->is_join != 1)
                <div class="unfold-field">
                    <div class="unflod-field_mask"></div>
                    <div class="unfold-field_text"><span>展开全文</span></div>
                </div>
                    @endif
            </article>
        </div>

        @include('common.new-menu')
    </div>
    <script>
        $(function () {
            var endTime = "@if($plan){{$plan->end_time}}@endif";
            $('#out_time').countdown(endTime, function(event) {
                $(this).html(event.strftime('%D 天'));
//                $(this).html(event.strftime('%D 天 %H:%M:%S'));
            });

            function unfold(){
                var doc =  document;
                var wrap=doc.querySelector(".weui-article");
                var unfoldField=doc.querySelector(".unfold-field");
                document.onreadystatechange = function () {
                    if (document.readyState === "complete") {
                        var wrapH=doc.querySelector(".weui-article").offsetHeight;
                        var contentH=doc.querySelector(".font-size-xregular").offsetHeight;
                        if(contentH <= wrapH){
                            unfoldField.style.display="none";
                        }
                    }
                }
            }
            unfold();

            $(".unfold-field").click(function () {
                $.alert("加入会员即可查看全文！","温馨提示",function () {
                    window.location.href="{{route('Home.Page.joinMember')}}";
                });
            });
        });
    </script>
@endsection